<template>
	<view style="background-color: #e0e5ec;min-height: 100vh;">
		<view class="fonmie">
			<form>
				<div class="segment">
					<h1>Let me know you</h1>
				</div>
				<view class="inure">
					<input v-model="form.nickname" @focus="isfocus" @blur="blurd" placeholder="姓名" type="text" value="" />
				</view>
				<view class="inure">
					<input v-model="form.gender" @focus="isfocus" @blur="blurd" placeholder="性别" type="text" value="" />
				</view>
				<view class="inure">
					<input v-model="form.grader" @focus="isfocus" @blur="blurd" placeholder="大几" type="text" value="" />
				</view>
				<view class="inure">
					<input v-model="form.catexueyuan" @focus="isfocus" @blur="blurd" placeholder="学校全名" type="text"
						value="" />
				</view>
				<view class="inure">
					<input v-model="form.major" @focus="isfocus" @blur="blurd" placeholder="在读专业全名" type="text" value="" />
				</view>
				<view class="inure">
					<input v-model="form.age" @focus="isfocus" @blur="blurd" placeholder="出生年月2000-1-1" type="text"
						value="" />
				</view>
				<view class="inure">
					<input v-model="form.qq" @focus="isfocus" @blur="blurd" placeholder="QQ" type="text" value="" />
				</view>
				<view class="inure">
					<input v-model="form.wx" @focus="isfocus" @blur="blurd" placeholder="微信" type="text" value="" />
				</view>
			</form>
			<button class="buttons" @click="tijiao" type="default">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					nickname: '',
					gender: '',
					catexueyuan: '',
					major: '',
					age: '',
					qq: '',
					wx: '',
					grader:'',
					date:''
				}
			};
		},
		methods: {
			
		async tijiao(){
				if(this.form.nickname!==''&&this.form.gender!==''&&this.form.catexueyuan!==''&&this.form.major!==''&&this.form.age!==''&&this.form.qq!==''&&this.form.wx!==''&&this.form.grader!==''){
					let date=+new Date()
					this.form.date=date+''
					const db = uniCloud.database()
					let res = await db.collection('zhucemessge').add(this.form)
					if (res.result.code === 0) {
						this.$message.success('提交成功')
					} else {
						this.$message.error('提交失败')
					}
				}else{
					this.$message.error('请完整填写表单！')
				}
			}
		}
	}
</script>

<style lang="scss">
	.fonmie {
		padding: 0px 30px 30px;
	}

	.inure {
		width: 100%;
		border-radius: 320px;
		box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
		width: 100%;
		box-sizing: border-box;
		transition: all 0.2s ease-in-out;
		padding: 15px 15px;
		background-color: #e0e5ec;
		text-shadow: 1px 1px 0 #FFF;
		color: #757575;
		margin-top: 15px;
	}

	div,
	p {
		color: #BABECC;
		text-shadow: 1px 1px 1px #FFF;
	}

	form {
		padding: 16px;
		width: 320px;
		margin: 0 auto;
	}

	.segment {
		padding: 32px 0;
		text-align: center;
	}

	button {
		border: 0;
		outline: 0;
		font-size: 16px;
		border-radius: 320px;
		padding: 6px;
	}

	label {
		display: block;
		margin-bottom: 24px;
		width: 100%;
	}

	// input {
	//     margin-right: 8px;
	//     box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
	//     width: 100%;
	//     box-sizing: border-box;
	//     transition: all 0.2s ease-in-out;
	//     appearance: none;
	//     -webkit-appearance: none;
	// }
	// input:focus {
	//     box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
	// }
	button {
		color: #61677C;
		box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
		transition: all 0.2s ease-in-out;
		cursor: pointer;
		font-weight: 600;
		background-color: #e0e5ec;
		text-shadow: 1px 1px 0 #FFF;
	}

	button:active {
		box-shadow: inset 1px 1px 2px #e0e5ec, inset -1px -1px 2px #FFF;
	}

	button .icon {
		margin-right: 8px;
	}

	button.unit {
		border-radius: 8px;
		line-height: 0;
		width: 48px;
		height: 48px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0 8px;
		font-size: 19.2px;
	}

	button.unit .icon {
		margin-right: 0;
	}

	button.red {
		display: block;
		width: 100%;
		color: #AE1100;
	}

	.input-group {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.input-group label {
		margin: 0;
		flex: 1;
	}
</style>
